/*
 * @description:
 * @version:
 * @Author: 王治飞
 * @Date: 2023-08-18 17:53:55
 * @LastEditors: 王治飞
 * @LastEditTime: 2023-08-18 17:59:52
 */
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { memo, useState } from 'react'
import ScorllView from '../scorllView'
import { SecondTabsWarp } from './style'

const SecondTabs = memo(props => {
  const { list = [] } = props
  const [clickIndex,setClickIndex] = useState(0)
  function changeCity (item,index) {
    props.changeCity(item)
    setClickIndex(index)
  }
  return (
    <SecondTabsWarp>
      <div className="scrooll">
        <div className="tabs">
          <ScorllView>
            {list.map((item,index) => {
              return <div className={`item ${classNames({active: clickIndex === index})}`}  key={item.name}  onClick={e=>changeCity(item,index)}>{item.name}</div>
            })}
          </ScorllView>
        </div>
      </div>
    </SecondTabsWarp>
  )
})

SecondTabs.propTypes = {
  list: PropTypes.array,
  changeCity:PropTypes.func
}

export default SecondTabs
